<template>
	<view class="content">
		
		<view class="form" v-if="step == 0">
			
			<view style="width: 670rpx;margin-top: 100rpx;margin-bottom: 140rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">
				Hi~你好哇，欢迎来到候浪者的小小岛屿，我们将在这里一起愉快的度过大学剩余的时光，点击下一步，开启你在候浪的旅行~
			</view>
			
			<view class="loginBtn" style="margin-top: 200rpx;" @click="nextStep()">
				<text class="btnValue">下一步</text>
			</view>
		</view>
		
		
		<view class="form" v-if="step == 1">
			
			
			<view style="width: 670rpx;margin-top: 100rpx;margin-bottom: 140rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">我们还需要你的一些信息来为你提供更精准的服务~</view>
			
			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="school" placeholder="请输入你的学校名称" />
			</view>
			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="ability" placeholder="请输入你想研究的领域" />
			</view>
			<view class="loginBtn" style="margin-top: 200rpx;" @click="nextStep()">
				<text class="btnValue">下一步</text>
			</view>
			
			<view style="color: gray;margin-top: 60rpx;" @click="lastStep()">上一步</view>
		</view>
		
		
		<view class="form" v-if="step == 2">
			
			
			<view style="width: 670rpx;margin-top: 100rpx;margin-bottom: 140rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">还需要你的一些信息来为你提供更好的体验~</view>
			
			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="hobby" placeholder="请输入你的爱好" />
			</view>
			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="games" placeholder="请输入你喜欢的游戏类型(可以举例)" />
			</view>
			<view class="loginBtn" style="margin-top: 200rpx;" @click="nextStep()">
				<text class="btnValue">下一步</text>
			</view>
			
			<view style="color: gray;margin-top: 60rpx;" @click="lastStep()">上一步</view>
		</view>
		
		<view class="form" v-if="step == 3">
			
			
			<view style="width: 670rpx;margin-top: 100rpx;margin-bottom: 140rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">描述一下你对飓风学姐或者学长的期待吧，ta会是成长路上的好伙伴~</view>
			
			<view class="textareaWrapper">
				<textarea :show-confirm-bar="false" style="background-color: #f5f5f5 !important;padding: 30rpx;height: 600rpx;" type="text" v-model="description" placeholder="请输入期待" ></textarea>
			</view>
			<view class="loginBtn" style="margin-top: 100rpx;" @click="nextStep()">
				<text class="btnValue">下一步</text>
			</view>
			<view style="color: gray;margin-top: 60rpx;" @click="lastStep()">上一步</view>
		</view>
		
		<view class="form" v-if="step == 4">
			
			
			<view style="width: 670rpx;margin-top: 100rpx;margin-bottom: 40rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">请描述一下你当前的生活学习状态，并对期望的状态做一个设想~</view>
			
			<view class="textareaWrapper">
				<textarea :show-confirm-bar="false" style="background-color: #f5f5f5 !important;padding: 30rpx;height: 600rpx;" type="text" v-model="statusNow" placeholder="请输入你对当前生活学习状态的描述" ></textarea>
			</view>
			<view class="textareaWrapper">
				<textarea :show-confirm-bar="false" style="background-color: #f5f5f5 !important;padding: 30rpx;height: 600rpx;" type="text" v-model="statusWish" placeholder="请输入你期望的状态" ></textarea>
			</view>
			<view class="loginBtn" style="margin-top: 100rpx;" @click="nextStep()">
				<text class="btnValue">下一步</text>
			</view>
			<view style="color: gray;margin-top: 60rpx;margin-bottom: 60rpx;" @click="lastStep()">上一步</view>
		</view>
		
		
		<view class="form" v-if="step == 5">
			
			
			<view style="width: 670rpx;margin-top: 100rpx;margin-bottom: 40rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">请对你的目标做一个简短的描述~</view>
			
			<view class="inputWrapper">
				<input class="input" maxlength="12" style="background-color: #f5f5f5 !important;" type="text" v-model="goal" placeholder="保持在12个字及以下" />
			</view>
			<view class="loginBtn" style="margin-top: 100rpx;" @click="nextStep()">
				<text class="btnValue">下一步</text>
			</view>
			<view style="color: gray;margin-top: 60rpx;margin-bottom: 60rpx;" @click="lastStep()">上一步</view>
		</view>
		
		<view class="form" v-if="step == 6">
			
			
			<view style="width: 670rpx;margin-top: 100rpx;margin-bottom: 40rpx;font-size: 80rpx;letter-spacing: 5rpx;display: flex;flex-direction: row;">最后一步啦~请提出一个你关心的问题，并写出你的观点和详细回答~</view>
			
			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="question" placeholder="请输入问题标题" />
			</view>
			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="context" placeholder="请输入问题描述" />
			</view>
			<view class="inputWrapper">
				<input class="input" style="background-color: #f5f5f5 !important;" type="text" v-model="point" placeholder="请输入观点" />
			</view>
			<view class="textareaWrapper">
				<textarea :show-confirm-bar="false" style="background-color: #f5f5f5 !important;padding: 30rpx;height: 600rpx;" type="text" v-model="answer" placeholder="请输入回答" ></textarea>
			</view>
			<view class="loginBtn" style="margin-top: 40rpx;" @click="toBeHular()">
				<text class="btnValue" >申请成为候浪者</text>
			</view>
			<view style="color: gray;margin-top: 60rpx;margin-bottom: 60rpx;" @click="lastStep()">上一步</view>
		</view>
		
	</view>
</template>

<script>
	
	import http from '@/common/service/service.js';
	import UploadOss from '@/common/util/UploadOss'
	import {
		mapActions
	} from "vuex";
	
	export default {
		data() {
			return {
				step:0,
				
				
				school:'',
				ability:'',
				games:"",
				hobby:"",
				
				description:'',
				
				statusNow:"",
				statusWish:"",
				
				goal:"",
				
				question:'',
				context:'',
				point:'',
				answer:'',
			}
		},
		methods: {
			nextStep(){
				this.step = this.step+1
			},
			
			lastStep(){
				this.step = this.step-1
			},
			
			toBeHular() {
				this.$api.toBeHular({
					goal:this.goal,
					school:this.school,
					ability:this.ability,
					games:this.games,
					description:this.description,
					statusNow:this.statusNow,
					statusWish:this.statusWish,
					question:this.question,
					context:this.context,
					point:this.point,
					answer:this.answer,
					hobby:this.hobby
				}).then(res=>{
					
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #FFFFFF;
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.form {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.avatar {
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			
			.inputWrapper {
				width: 600rpx;
				height: 120rpx;
				background: white;
				border-radius: 20rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-top: 30rpx;
			}
			
			.textareaWrapper{
				width: 600rpx;
				height: 400rpx;
				background: white;
				border-radius: 20rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-top: 30rpx;
			}
			
			.inputWrapper .input {
				width: 520rpx;
				padding: 0 40rpx;
				height: 100%;
				border-radius: 20rpx;
				font-size: 15px;
			}
			
			.loginBtn {
				width: 600rpx;
				height: 100rpx;
				background: #5DACB1;
				border-radius: 20rpx;
				margin-top: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			
			}
			
			.loginBtn .btnValue {
				color: white;
			}
			
		}
		
	}
</style>
